<template>
    <div class="app-container paper">
      <h2 class="paper__name">{{ props.paperDetails.paperName }}</h2>
  
      <div v-if="!props.isPreview" class="paper__block">
        <h3 class="paper__block-name">答题卡</h3>
  
        <div class="paper__block-info">
          <p class="paper__block-info-title">已答:</p>
          <div class="paper__block-select paper__block-select-bg"></div>
          <p class="paper__block-info-title paper__block-info-title-ml15">
            未答:
          </p>
          <div class="paper__block-select"></div>
        </div>
        <p
          v-if="singleSelectQuestion && singleSelectQuestion.length"
          class="paper__block-title"
        >
          一、单选题（{{ props.paperDetails.danXuanScore }}分/题）
        </p>
        <div
          v-for="(item, index) in singleSelectQuestion"
          :key="index"
          class="paper__block-select"
          :class="{ 'paper__block-select-bg': item.answer }"
        ></div>
        <p
          v-if="multipleSelectQuestion && multipleSelectQuestion.length"
          class="paper__block-title"
        >
          二、多选题（{{ props.paperDetails.duoXuanScore }}分/题）
        </p>
        <div
          v-for="(item, index) in multipleSelectQuestion"
          :key="index"
          class="paper__block-select"
          :class="{ 'paper__block-select-bg': item.answer }"
        ></div>
        <p
          v-if="judgeSelectQuestion && judgeSelectQuestion.length"
          class="paper__block-title"
        >
          三、判断题（{{ props.paperDetails.panDuanScore }}分/题）
        </p>
        <div
          v-for="(item, index) in judgeSelectQuestion"
          :key="index"
          class="paper__block-select"
          :class="{ 'paper__block-select-bg': item.answer }"
        ></div>
  
        <div class="paper__block-footer">
          <el-button type="primary" @click="handlePaper">交 卷</el-button>
        </div>
      </div>
  
      <div
        v-if="singleSelectQuestion && singleSelectQuestion.length"
        class="paper__single-select"
      >
        <h3 class="paper__title">
          一、单选题（{{ props.paperDetails.danXuanScore }}分/题）
        </h3>
  
        <div
          class="paper__item"
          v-for="(item, index) in singleSelectQuestion"
          :key="index"
        >
          <!-- questionId -->
          <p class="paper__item-title">
            {{ index + 1 }}、{{ item.questionTitle }}
          </p>
          <el-radio-group
            v-model="item.answer"
            class="ml-4"
            :disabled="props.isPreview"
          >
            <el-radio
              v-for="(question, questionIndex) in item.questionAnswerList"
              :key="questionIndex"
              :label="question.optionLabel"
              size="large"
              >{{ question.optionLabel }}{{ question.content }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
      <div
        v-if="multipleSelectQuestion && multipleSelectQuestion.length"
        class="paper__multiple-select"
      >
        <h3 class="paper__title">
          二、多选题（{{ props.paperDetails.duoXuanScore }}分/题）
        </h3>
  
        <div
          class="paper__item"
          v-for="(item, index) in multipleSelectQuestion"
          :key="index"
        >
          <p class="paper__item-title">
            {{ index + 1 }}、{{ item.questionTitle }}
          </p>
          <el-checkbox-group v-model="item.answer" :disabled="props.isPreview">
            <el-checkbox
              v-for="(question, questionIndex) in item.questionAnswerList"
              :key="questionIndex"
              :label="question.optionLabel"
              >{{ question.optionLabel }}{{ question.content }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div
        v-if="judgeSelectQuestion && judgeSelectQuestion.length"
        class="paper__judge-select"
      >
        <h3 class="paper__title">
          三、判断题（{{ props.paperDetails.panDuanScore }}分/题）
        </h3>
        <div
          class="paper__item"
          v-for="(item, index) in judgeSelectQuestion"
          :key="index"
        >
          <p class="paper__item-title">
            {{ index + 1 }}、{{ item.questionTitle }}
          </p>
          <el-radio-group v-model="item.answer" :disabled="props.isPreview">
            <el-radio
              v-for="(question, questionIndex) in judgeQuestionAnswerList"
              :key="questionIndex"
              :label="question.optionLabel"
              size="large"
              >{{ question.content }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
    </div>
  </template>
  
  <script setup name="Paper">
  import { examAnswer } from "@/api/testCenter/paper";
  
  const emit = defineEmits(["paperSuccess"]);
  
  const props = defineProps({
    paperDetails: {
      type: Object,
      default: () => {},
    },
    currentId: {
      type: String,
      default: "",
    },
    isPreview: {
      type: Boolean,
      default: false,
    },
  });
  
  const judgeQuestionAnswerList = [
    {
      optionLabel: "正确",
      content: "正确",
    },
    {
      optionLabel: "错误",
      content: "错误",
    },
  ];
  
  const singleSelectQuestion = ref(props.paperDetails.danxuanList || []);
  const multipleSelectQuestion = ref(props.paperDetails.duoxuanList || []);
  const judgeSelectQuestion = ref(props.paperDetails.panduanList || []);
  
  const { proxy } = getCurrentInstance();
  
  watch(
    () => props.currentId,
    (value) => {
      singleSelectQuestion.value = props.paperDetails.danxuanList;
      multipleSelectQuestion.value = props.paperDetails.duoxuanList;
      judgeSelectQuestion.value = props.paperDetails.panduanList;
    }
  );
  
  function handlePaper(row) {
    proxy.$modal
      .confirm("是否确定交卷？")
      .then(() => {
        submitForm();
      })
      .catch(() => {});
  }
  
  function submitForm() {
    const singleQuestionAnswers = singleSelectQuestion.value.map((question) => ({
      questionId: question.questionId,
      answer: [question.answer],
    }));
  
    const multipleQuestionAnswers = multipleSelectQuestion.value.map(
      (question) => ({
        questionId: question.questionId,
        answer: question.answer,
      })
    );
  
    const judgeQuestionAnswers = judgeSelectQuestion.value.map((question) => ({
      questionId: question.questionId,
      answer: [question.answer],
    }));
  
    let stuAnswersList = [];
  
    if (singleQuestionAnswers && singleQuestionAnswers.length > 0)
      stuAnswersList = stuAnswersList.concat(singleQuestionAnswers);
    if (multipleQuestionAnswers && multipleQuestionAnswers.length > 0)
      stuAnswersList = stuAnswersList.concat(multipleQuestionAnswers);
    if (judgeQuestionAnswers && judgeQuestionAnswers.length > 0)
      stuAnswersList = stuAnswersList.concat(judgeQuestionAnswers);
  
    examAnswer({
      stuAnswersList,
      exameId: props.currentId,
    })
      .then((res) => {
        proxy.$modal.msgSuccess("交卷成功");
        emit("paperSuccess");
      })
      .catch(() => {
        proxy.$modal.msgError("交卷失败，请联系管理员");
      });
  }
  </script>
  
  <style lang="scss" scoped>
  @import './index.scss'
  </style>
  